<template>
  <div class="CommunityGovernanceInfo">
    <div class="base-info">
      <el-descriptions :column="1">
        <el-descriptions-item
          v-for="(item, index) in baseInfoList"
          :key="index"
          :label="item.label + ':'"
        >
          {{
            info ? (info[item.value] ? info[item.value] + item.unit : '') : ''
          }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>小区或连片居民楼物业管理用房</span>
      </div>
      <div
        class="content"
        v-if="info && info.manageHouses && info.manageHouses.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.manageHouses"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
      <div class="content" v-else>
        <!--        <el-empty description="暂无数据" />-->
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>有物业智慧化管理平台的小区</span>
      </div>
      <div
        class="content"
        v-if="info && info.estateManagements && info.estateManagements.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.estateManagements"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
      <div class="content" v-else>
        <!--        <el-empty description="暂无数据" />-->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})

const baseInfoList = [
  {
    label: '社区管理人员数量（不含网格员）',
    value: 'numManagementPersonnel',
    unit: '人',
  },
  {
    label: '社区党员数量',
    value: 'numCommunistPersonnel',
    unit: '人',
  },
  {
    label: '社区网格数量',
    value: 'numGrid',
    unit: '个',
  },
  {
    label: '社区网格员数量',
    value: 'numGridmanagementPersonnel',
    unit: '人',
  },
  {
    label: '社区业委会数量',
    value: 'numCommittee',
    unit: '个',
  },
  {
    label: '社区志愿组织数量',
    value: 'numVoluntaryOrganization',
    unit: '人',
  },
  {
    label: '未覆盖物业服务小区数',
    value: 'numNotHasManagement',
    unit: '个',
  },
  {
    label: '社区智慧化平台',
    value: 'hasSmartPlatform',
    unit: '个',
  },
  {
    label: '智慧化平台功能',
    value: 'smartPlatformFunction',
    unit: '',
  },
]
</script>

<style scoped lang="scss">
.CommunityGovernanceInfo {
  padding: 15px 10px 15px 5px;
  overflow-y: auto;
  height: 100%;

  :deep(.el-descriptions__label) {
    display: inline-block;
    width: 102px;
    color: #717689;
  }

  .base-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 10px;

    span {
      font-size: 14px;
      line-height: 32px;
    }
    :deep(.el-descriptions__cell) {
      border-bottom: 1px dashed #e1e1eb;
      .el-descriptions__content {
        color: #27475f;
      }
    }
  }

  .content {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    span {
      font-size: 14px;
      line-height: 32px;
    }
  }

  .title {
    margin-top: 5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    :deep(.el-icon) {
      width: 3px;
      height: 18px;
      margin-right: 6px;
      background-color: #28b1e4;
      border-radius: 2px;
    }

    span {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .building-info-item {
    display: flex;
    flex-direction: column;
    padding: 11px 15px;
    background-color: rgba(249, 249, 252, 1);
    border-radius: 4px;
    margin-bottom: 12px;

    color: #717689;

    .position {
      color: RGBA(39, 71, 95, 1);
    }
  }
}
</style>
